<template>
	<div>
		<el-dialog
		  :title="addtion.title"
		  :visible.sync="dialogVisible"
		  >
		  <el-row class="card">
			  <el-col :span="5"><el-tag type="info">一级学科 ：</el-tag></el-col>
			  <el-col :span="7">{{ addtion.first }}</el-col>
			  <el-col :span="5"><el-tag type="info">二级学科 ：</el-tag></el-col>
			  <el-col :span="7">{{ addtion.second }}</el-col>
		  </el-row>
		  <el-input :rows="4" class="file" type="textarea" v-model="addtion.detail" disabled></el-input>
		  <el-row class="reference">
			  <el-col :span="5"><el-tag type="info">参考文献 ：</el-tag></el-col>
			  <el-col :span="18">{{ addtion.reference }}</el-col>
		  </el-row>
		</el-dialog>
		<div class="title">
			<span>{{ flag === 0 ? '我的添加' : '我的收藏'}}</span>
		</div>
		<hr/>
		<header-sub-filter @getFilterParms="getFilterParms"></header-sub-filter>
		<div v-for="(data,index) in dataList" :key="index">
			<el-row>
				<el-col :span="3"><el-button type="text" @click="getDetail(data)">{{ index+1 }}</el-button></el-col>
				<el-col :span="12" class="text-left"><el-button @click="getDetail(data)" type="text">{{ data.title }}</el-button></el-col>
				<el-col :span="4"><el-button type="text"  @click="getDetail(data)" icon="el-icon-star-off">{{ data.cnt }}</el-button></el-col>
				<el-col :span="5"><el-button type="text" @click="deleteRecord"><span v-if="flag == 0">删除内容</span><span v-else>取消收藏</span></el-button></el-col>
			</el-row>
		</div>
		<div class="demonstration">
				<el-pagination ref="pagination"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					:layout="isMobile === true ? 'total, sizes, prev, next, jumper' : 'total, sizes, prev, pager, next, jumper'"
					:total="totalSizes">
				</el-pagination>
		</div>
	</div>
</template>

<script>
	import common from './Common.vue'
	import constant from '../static/constant.json'
	import headerSubFilter from './headerSubFilter'
	import { _isMobile } from '../js/common.js'
	export default {
	  name: 'Mine',
	  components: {
		  headerSubFilter: headerSubFilter,
	  },
	  props:{
		  flag: Number, // 0 表示 我的添加  1 表示 我的收藏
		  // 传进来的所有数据
	  },
	  data() {
		  return {
			  isMobile: false,
			  userName: common.userName,
			  currentPage: 1,
			  pageSizes: [2,4,8,16],
			  pageSize: 2,
			  totalSizes: 0,
			  ruleForm:{
			  		FirstSubject:'',
			  		SecondSubject:'',
			  		reference:''
			  	},
			  	responseResult:[],
			  	optionList:'',
			  	FirstSubList: constant.FirstSubList,
			  	SecondSubList:'',
			  	SecondSubLists: constant.SecondSubList,
				addtion: {
						title:'tmp',
						cnt: 200,
						first: 'tmp',
						second: 'tmp',
						detail: 'ttmp'
					},
				// datalist 测试，应该赋为 空 []
				dataList: [
					{
						title:'aaaaaaaaaaaaaa',
						cnt: 200,
						first: '数理学科',
						second: '数学',
						reference: 'asdf',
						detail: 'asdfghjasdfadsfdasfsdfasdfasdfasdfdsfsdfsdf121234jhjhdsjaigjeijkjkhuisdfjksdfjklsadjfsadgasdgfdsakjfjasdhgjhadfjhgkjhsakdjghadsjhgkjahdskgjhsajdhfkjghh'
					},
					{
						title:'aaaaaaaaaaaaaa',
						cnt: 200,
						first: '数理学科',
						second: '数学',
						detail: 'qwewqer12312343125234',
						reference: 'asdf'
					},
					{
						title:'aaaaaaaaaaaaaa',
						cnt: 200,
						first: '数理学科',
						second: '数学',
						detail: 'sadfsadfewfaf',
						reference: 'asdf'
					},
				],
				/*
				datas: {
							  title:'aaaaaaaaaaaaaa', // 数据格式与 添加 相同，点击每一行会弹出详情
							  cnt: 200,
							  first: '数理学科',
							  second: '数学',
							  detail: 'sadfsadfewfaf',
							  reference: 'asdf'
				}
				*/
			   datas: [],
			   dialogVisible: false
			  }
	  },
	methods:{
		// 点击标题弹出详情
		getDetail(data) {
			this.addtion = data
			this.dialogVisible = true
		},
		// flag 0 删除， 1 取消
		deleteRecord(id){
			this.$axios
				.post('api/delete',{
				flag: this.flag, // 0 我的添加  1 我的收藏
				id: id, // true 为全部  false 为筛选
				username: common.userName,
			})
				.then(successRespond => {
					this.ruleForm.FirstSubject = ''
					// 下面一句多余，没测试
					// this.ruleForm.SecondSubject = ''
					this.datas = successRespond.data
					this.getList()
					this.totalSizes=this.dataList.length
				})
				.catch(failRespond => {
				})
		},
		getFilterParms(first,second, isall){
			// first second 为空可能为 undedined  或 ''
			  // 我的词库筛选方法
			  this.$axios
				.post('api/mine',{
				flag: this.flag, // 0 我的添加  1 我的收藏
				isall: isall, // true 为全部  false 为筛选
				username: common.userName,
				FirstSubject:first,  // 只会存在 第一第二学科都为空、 第一不为空第二为空 、都不为空3种情况
				SecondSubject: second
			  })
				.then(successRespond => {
					this.datas = successRespond.data
					this.getList()
					this.totalSizes=this.datas.length
				})
				.catch(failRespond => {
				})
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.$refs.pagination.handleCurrentChange();
			this.currentPage = this.$refs.pagination.currentPage;
			this.pageSize = val;
			this.getList();
			},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.currentPage = val;
			this.getList();
			},
		getList() {
			this.dataList = this.datas.slice((this.currentPage-1)*(this.pageSize),(this.currentPage-1)*(this.pageSize)+this.pageSize);
		},
		changeFirstSub(value){
			this.ruleForm.SecondSubject=''
			this.SecondSubList = this.SecondSubLists[value]
		},
		changeHandler(value){
			// this.$message('改变之后的值是:' + value);
		},
	},
	mounted() {	
		this.getFilterParms('','',true)
		this.isMobile = _isMobile()
	}
	}
</script>
<style scoped lang="less">
	.card {
		text-align: left;
		line-height: 32px;
	}
	.el-dialog {
		text-align: left;
	}
	.firstcol {
		line-height: 40px;
	}
	.text-left {
		text-align: left;
	}
	.title {
		color: gray;
		font-size: 28px;
		text-align: left;
		margin-left: 20px;
	}
	hr {
		height: 1px;
		color: gray;
	}
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple {
	    background: #d3dce6;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 36px;
		line-height: 100%;
	  }
	  .row-bg {
	    padding: 10px 0;
	    background-color: #f9fafc;
	  }
	  .reference{
		  margin-top:20px;
	  }
</style>
